
<template>

    <div>
        <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="活动名称">
            <el-input v-model="searchMap.name" placeholder="活动名称"></el-input>
        </el-form-item>

        <el-form-item label="开始时间">
                <el-date-picker v-model="searchMap.starttime" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
         <el-form-item label="截止时间">
            <el-date-picker v-model="searchMap.endtime" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search()">查询</el-button>
            <el-button type="primary" @click="handleEdit('')">新增</el-button>
        </el-form-item>       

        </el-form>       
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="summary" label="活动简介" width="180"></el-table-column>
            <el-table-column prop="detail" label="活动说明" width="180"></el-table-column>
            <el-table-column prop="starttime" label="开始时间" width="180"></el-table-column>
            <el-table-column prop="id" label="活动id" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
                <el-button @click="dele(scope.row.id)" type="text" size="small">删除</el-button>             
            </template>
            </el-table-column>            
        </el-table>

        <el-pagination @size-change="search" @current-change="search" :current-page.sync="page"
            :page-sizes="[10, 20, 30, 40]" :page-size="size" layout="sizes, prev, pager, next" :total="total">
        </el-pagination>


        <el-dialog title="新增活动" :visible.sync="dialogFormVisible">
        <el-form label-width="80px">
            <el-form-item label="活动名称" >
                <el-input v-model="pojo.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="基本地点" >
                <el-select v-model="pojo.address" placeholder="请选择">
                    <el-option
                    v-for="item in cityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>                
            </el-form-item>
             <el-form-item label="开始日期" >
                <el-date-picker v-model="pojo.starttime" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
             <el-form-item label="截止日期" >
                <el-date-picker v-model="pojo.endtime" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
             <el-form-item label="报名截止" >
                <el-date-picker v-model="pojo.enrolltime" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="活动详情" >
                <el-input v-model="pojo.detail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否可见" >
                <el-switch v-model="pojo.state" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </el-form-item>                                                                     
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
        </div>
        </el-dialog>        
    </div>
</template>
<script>
import gatheringApi from '@/api/gathering'
import cityApi from '@/api/city'
export default {
    data(){
        return {
            list:[],
            searchMap:{},
            page:1,
            size:10,
            total:0,
            dialogFormVisible: false,
            pojo:{},
            cityList:null,
            id:null
        }
    },
    created(){
        this.search(),
        this.fetchcityData()
    },
    methods:{
        fetchData(){
            gatheringApi.getList().then(response => {
                this.list=response.data;
            });
        },
        fetchcityData(){
            cityApi.getList().then(response => {
                this.cityList=response.data;
            });
        },        
        //条件查询方法
        search(){
            gatheringApi.search(this.searchMap,this.page,this.size).then(response => {
                this.list = response.data.rows;
                this.total = response.data.total;
            });
        },    
        saveOrUpdate(){
            gatheringApi.saveOrUpdate(this.id,this.pojo).then(response => {
                this.$message({
                    message: response.message,
                    type: (response.flag?'success':'error')
                });                
                this.dialogFormVisible = false;
                this.fetchData();
            });
        },
        handleEdit(id){
            this.dialogFormVisible=true//打开窗口
            this.id=id
            //调用查询
            if(id!=''){
                gatheringApi.findById(id).then( response=>{
                    if(response.flag){
                        this.pojo=response.data;
                    }
                })                   
            }else{
                this.pojo = {};
            }

        },
        dele(id){

            this.$confirm('是否要删除本条记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                gatheringApi.delete(id).then(response => {
                    this.$message({
                        message: response.message,
                        type: (response.flag?'success':'error')
                    });                
                    this.fetchData();
                });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });

        },         
                
    }
}
</script>